<template>
    <div class="main" ref="rightUserList">
        <div class="file-box">
            <check-icon class="file-icon" :fileData="fileData"></check-icon>
            <div class="file-content">
                <p class="file-name" v-text="fileData.name"></p>
                <p class="time">
                    <span v-text="publicFun.rebuildTime(fileData.updateTime,2)"></span>
                    <!--<span class="size" v-text="size"></span>-->
                </p>
            </div>
        </div>
        <ul class="file-list-box">
            <li v-for="(file,key) in  historyFileList" :key="key">
                <div class="top">
                    <h1 class="fl">v1</h1>
                    <h2 class="fl file-name" v-text="file.name">测试ppt</h2>
                    <!--<h3 class="fr current">当前版本</h3>-->
                </div>
                <div class="bottom">
                    <p class="fl time" v-text="publicFun.rebuildTime(file.createTime,1)"></p>
                    <div class="fr button-box">
                        <img title="删除" @click="deleteFile(file.id,key)" class="fr pointer"
                             src="@/assets/icon/history/delete_icon.png">
                        <img title="下载" @click="downloadFile(file)" class="fr pointer"
                             src="@/assets/icon/history/download_icon.png">
                        <img title="设为最新版本" @click="setCurrentVersion(file)" class="fr pointer"
                             src="@/assets/icon/history/history_file_icon.png">
                    </div>
                </div>
            </li>
        </ul>
        <p class="text-center" style="line-height: 100px" v-if="!loading && historyFileList.length === 0">暂无其他版本</p>
        <div class="upload-button" align="center">
            <div class="button">+ 上传新版本
                <input type="file" ref="file" @change="chooseFileOver" class="choose-file-button pointer">
            </div>
        </div>
        <loading v-show="pageLoading"></loading>
    </div>
</template>

<script>
  import CheckIcon from '@/components/CheckIcon'
  import Loading from '@/components/Loading'

  export default {
    name: "PersonnelRightMenu",
    components: {
      CheckIcon,
      Loading
    },
    data() {
      return {
        pageLoading:false,
        historyFileList: [],
        loading: true
      }
    },
    created() {

    },
    beforeDestroy() {
      document.removeEventListener('click', this.outClick)
    },
    mounted() {
      const that = this
      document.removeEventListener("click", this.outClick)
      setTimeout(function () {
        document.addEventListener('click', that.outClick)
      })
      this.getHistoryFileList()
    },
    watch: {
      fileData: function () {
        this.getHistoryFileList()
      },
      historyFileChange:function () {
        this.getHistoryFileList()
      }
    },
    props: {
      historyFileChange:{
        type:Number,
        default:function () {

        }
      },
      fileData: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    methods: {
      setCurrentVersion: function (file) {
        const that = this
        this.pageLoading = true
        this.$http.post('/pan/file/history/v1', {
          historyId: file.id,
          log: 'test'
        }).then(function (data) {
          that.pageLoading = false
          that.loading = false
          if(data.data.code === 1){
            that.$message({
              type:'success',
              message:'更新成功'
            })
            that.$emit('update:fileData',data.data.data)
          }
        }).catch(function () {
          that.pageLoading = false
          that.loading = false
        })
      },
      outClick: function (event) {
        if (!this.$refs.rightUserList.contains(event.target)) {
          document.removeEventListener("click", this.outClick)
          this.$emit('update:show', false)
        }
      },

      chooseFileOver: function (event) {
        let file = event.target.files[0]
        const dataId = this.$uuidv1()
        let fileDatas = [{
          id: dataId,
          fileId: this.fileData.fileId,
          path: file.path,
          name: file.name,
          size: file.size,
          type: file.type,
          lastModified: file.lastModified,
          time: new Date().getTime(),
          isHistory: true,
          log: '测试新版本',
          percent: 0,
          file:file
        }]
        this.$emit('uploadHistoryFile',fileDatas)
        this.$refs.file.value = ''
      },

      deleteFile: function (fileId, index) {
        const that = this
        this.pageLoading = true
        this.$http.delete('/pan/file/history/v1/' + fileId).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.$message({
              type:'success',
              message:'删除成功'
            })
            that.historyFileList.splice(index, 1)
          }
        })
      },

      getHistoryFileList: function () {
        const that = this
        this.loading = true
        if (!this.fileData.fileId || this.fileData.fileId === '') return
        this.$http.get('/pan/file/history/v1/' + this.fileData.fileId).then(function (data) {
          that.loading = false
          console.log(data)
          if (data.data.code === 1) {
            that.historyFileList = data.data.data
          }
        }).catch(function () {
          that.loading = false
        })
      }
    }
  }
</script>

<style scoped>
    .main {
        position: absolute;
        right: 0;
        z-index: 500;
        top: 75px;
        height: calc(100vh - 77px);
        width: 320px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(238, 238, 238, 1);
        box-shadow: -6px 0 10px 0 rgba(90, 90, 90, 0.15);
    }

    .main .file-box {
        padding: 20px 0 0 20px;
        box-sizing: border-box;
        width: 320px;
        height: 69px;
        background: rgba(242, 248, 252, 1);
    }

    .main .file-box .file-icon {
        margin-top: 3px;
        float: left;
        width: 24px;
        height: 24px;
    }

    .main .file-box .file-content {
        margin-left: 10px;
        float: left;
    }

    .main .file-box .file-name {
        height: 14px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(50, 50, 50, 1);
    }

    .main .file-box .time {
        height: 12px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
        margin-top: 8px;
    }

    .main .file-box .size {
        margin-left: 10px;
    }

    .main .file-list-box {
        max-height: calc(100vh - 235px);
        overflow: auto;
        margin-top: 7px;
    }

    .main .file-list-box li .top {
        height: 16px;
    }

    .main .file-list-box li .bottom {
        margin-top: 10px;
        padding-left: 30px;
    }

    .main .file-list-box li .bottom .button-box {
        margin-top: 13px;
    }

    .main .file-list-box li .bottom .button-box img {
        height: 16px;
        width: 16px;
        margin-left: 12px;
    }

    .main .file-list-box li {
        padding: 13px 27px 0 18px;
        height: 70px;
    }

    .main .file-list-box li:hover {
        background: rgba(242, 245, 252, 0.65);

    }

    .main .file-list-box li h1 {
        font-size: 10px;
        width: 19px;
        color: #FFFFFF;
        letter-spacing: 0.71px;
        background: #87DC49;
        line-height: 16px;
        text-align: center;
    }

    .main .file-list-box li .file-name {
        font-size: 14px;
        line-height: 16px;
        color: #333333;
        letter-spacing: 0.86px;
        margin-left: 12px;
    }

    .main .file-list-box li .current {
        border: 1px solid #4690F5;
        color: #4690F5;
        line-height: 16px;
        font-size: 10px;
        width: 50px;
        box-sizing: border-box;
        text-align: center;
    }

    .main .file-list-box li .time {
        font-size: 12px;
        color: #666666;
        letter-spacing: 0.86px;
        line-height: 17px;
    }

    .main .upload-button {
        position: absolute;
        bottom: 0;
        background: #FFFFFF;
        box-shadow: 0 -1px 4px 0 rgba(216, 216, 216, 0.50);
        border-radius: 2px;
        height: 78px;
        width: 100%;
    }

    .main .upload-button .choose-file-button {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 200px;
        opacity: 0;
    }

    .main .upload-button .button {
        overflow: hidden;
        position: relative;
        background: #4690F5;
        border-radius: 2px;
        height: 30px;
        line-height: 30px;
        width: 200px;
        border: none;
        font-size: 12px;
        color: #FFFFFF;
        letter-spacing: 0.86px;
        margin: 25px 0 auto;
    }

</style>
